<template>
  <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
      <li class="page-item" :class="{ disabled: currentPage === 1 }" @click="goToFirstPage">
        <a class="page-link">首页</a>
      </li>
      <li class="page-item" :class="{ disabled: currentPage === 1 }" @click="previousPage">
        <a class="page-link">上一页</a>
      </li>

      <li class="page-item" :class="{ disabled: currentPage === totalPages }" @click="nextPage">
        <a class="page-link">下一页</a>
      </li>

      <li class="page-item" :class="{ disabled: currentPage === totalPages }" @click="goToLastPage">
        <a class="page-link">尾页</a>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { defineProps, defineEmits  } from 'vue';
const emit = defineEmits(['pageChange']); // 定义组件可以触发的事件
const props = defineProps({
  currentPage: {
    type: Number,
    required: true,
  },
  totalPages: {
    type: Number,
    required: true,
  },
});

const getDisplayPage = (n) => {
  // 当前页面 + n - 3 确保最多显示 5 个页面
  return props.currentPage + n - 3;
};

const goToPage = (page) => {
  if (page >= 1 && page <= props.totalPages) {
    emit('pageChange', page); // 触发事件
  }
};

const goToFirstPage = () => {
  goToPage(1);
};

const goToLastPage = () => {
  goToPage(props.totalPages);
};

const previousPage = () => {
  if (props.currentPage > 1) {
    goToPage(props.currentPage - 1);
  }
};

const nextPage = () => {
  if (props.currentPage < props.totalPages) {
    goToPage(props.currentPage + 1);
  }
};
</script>

<style scoped>
.pagination {
  margin-top: 20px;
}

.page-item {
  cursor: pointer;
}
.page-link{
  color: black;
}
</style>
